<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    .okTips{
        color : green;
    }
    .errorTips{
        color : red;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>newAccount</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top">
</div>

<div id="Content">
    <script>
        $(function (){
            $('#username').on('blur',function () {
                $.ajax({
                    type  : "GET",
                    url   : "checkRegister?username="+this.value,
                    success : function (data){
                        if(data.code === 0){
                            $('#usernameTips').attr("class","errorTips").text(data.msg);
                        }else if(data.code === 1) {
                            $('#usernameTips').attr("class","errorTips").text(data.msg);
                        }else{
                            $('#usernameTips').attr("class","okTips").text(data.msg);
                        }
                    }
                })
            })
        });
    </script>

    <script>
        //点击提交，发送异步请求
        $("#newAccount").click(function(content){
            //获取表单数据，并序列化
            var formData = $("#Account-form").serializeArray();
            //将序列化数据转为对象
            var formObject = {};
            for (let item in formData) {
                formObject[formData[item].name] = formData[item].value;
            }
            formData = JSON.stringify(formObject);
            //发送JSON到服务器
            $.ajax({
                type: "POST",
                url: "/account/register",
                contentType: "application/json",  //一定要设置这一行，很关键
                data : formData,
                datatype: "json",
                success: function (data) {
                    alert(JSON.stringify(data));
                }
            });
        });
    </script>
<!--    <script>-->
<!--        $(function (){-->
<!--            $('#password').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?password="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#passwordTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#passwordTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#passwordTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#firstname').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?firstname="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#FirstnameTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#FirstnameTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#FirstnameTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#lastname').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?lastname="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#LastnameTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#LastnameTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#LastnameTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#email').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?email="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#EmailTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#EmailTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#EmailTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#phone').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?phone="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#PhoneTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#PhoneTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#PhoneTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#address1').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?address1="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#Address1Tips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#Address1Tips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#Address1Tips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#city').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?city="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#CityTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#CityTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#CityTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#state').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?state="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#StateTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#StateTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#StateTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#zip').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?zip="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#ZipTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#ZipTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#ZipTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

<!--    <script>-->
<!--        $(function (){-->
<!--            $('#country').on('blur',function () {-->
<!--                $.ajax({-->
<!--                    type  : "GET",-->
<!--                    url   : "checkRegister?country="+this.value,-->
<!--                    success : function (data){-->
<!--                        if(data.code === 0){-->
<!--                            $('#CountryTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else if(data.code === 1) {-->
<!--                            $('#CountryTips').attr("class","errorTips").text(data.msg);-->
<!--                        }else{-->
<!--                            $('#CountryTips').attr("class","okTips").text(data.msg);-->
<!--                        }-->
<!--                    }-->
<!--                })-->
<!--            })-->
<!--        });-->
<!--    </script>-->

    <div id="Catalog"><form action="/account/register" method="post" id="Account-form" >
        <h3>User Information</h3>
        <table>
            <tr>
                <td>User ID:</td>
                <td>
                    <input id="username" type="text" name="username" />
                    <span id="usernameTips"></span>
                </td>
            </tr>
            <tr>
                <td>New password:</td>
                <td>
                    <input  id="password" type="password" name="password" />
                    <span id="passwordTips"></span>
                </td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="password" name="repeatedPassword" />
                    <span th:if="${failedRegister==false}">judgeSecondPassword</span>
                </td>
            </tr>
            <tr>
                <td>Verification code:</td>
                <td>
                    <input type="text" name="verification_code" />
                <span th:if="${verification_code_id==1}"><img src="/images/1.jpeg"></span>
                <span th:if="${verification_code_id==2}"><img src="/images/2.jpeg"></span>
                <span th:if="${verification_code_id==3}"><img src="/images/3.jpeg"></span>
                <span th:if="${verification_code_id==4}"><img src="/images/4.jpeg"></span>
                </td>
            </tr>
        </table>



<!--    <div th:replace="includeAccountForm">-->
<!--    </div>-->
    <h3>Account Information</h3>

    <table>
        <tr>
            <td>First name:</td>
            <td>
                <input id= "firstname"type="text" name="firstName">
                <span id="FirstnameTips"></span>
            </td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td>
                <input id="lastname" type="text" name="lastName">
                <span id="LastnameTips"></span>
            </td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>
                <input id="email" type="text" size="40" name="email">
                <span id="EmailTips"></span>
            </td>
        </tr>
        <tr>
            <td>Phone:</td>
            <td>
                <input id="phone" type="text" name="phone">
                <span id="PhoneTips"></span>
            </td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td>
                <input id="address1" type="text" size="40" name="address1">
                <span id="Address1Tips"></span>
            </td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td><label>
                <input type="text" size="40" name="address2">
            </label></td>
        </tr>
        <tr>
            <td>City:</td>
            <td>
                <input id="city" type="text" name="city">
                <span id="CityTips"></span>
            </td>
        </tr>
        <tr>
            <td>State:</td>
            <td>
                <input id="state" type="text" size="4" name="state">
                <span id="StateTips"></span>
            </td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td>
                <input id="zip" type="text" size="10" name="zip">
                <span id="ZipTips"></span>
            </td>
        </tr>
        <tr>
            <td>Country:</td>
            <td>
                <input id="country" type="text" size="15" name="country">
                <span id="CountryTips"></span>
            </td>
        </tr>
    </table>

    <h3>Profile Information</h3>

    <table>
        <tr>
            <td>Language Preference:</td>
            <td><label>
                <select name="languagePreference">
                    <option value="English"> English </option>
                    <option value="Japanese"> Japanese </option>
                </select>
            </label></td>
        </tr>
        <tr>
            <td>Favourite Category:</td>
            <td><label>
                <select name="favouriteCategoryId">
                    <option value="FISH"> FISH </option>
                    <option value="DOGS"> DOGS </option>
                    <option value="REPTILES"> REPTILES </option>
                    <option value="CATS"> CATS </option>
                    <option value="BIRDS"> BIRDS </option>
                </select>
            </label></td>
        </tr>
        <tr>
            <td>Enable MyList</td>
            <td><label>
                <input type="checkbox" name="listOption" />
            </label></td>
        </tr>
        <tr>
            <td>Enable MyBanner</td>
            <td><label>
                <input type="checkbox" name="bannerOption" />
            </label></td>
        </tr>
    </table>
        <input id="newAccount" type="submit" name="newAccount" value="Save Account Information" />

    </form></div>
</div>

<div th:replace="common/bottom">
</div>
</body>
</html>